<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/chat.css">
    <link rel="shortcut icon" href="./images/mycat.png" type="image/x-icon">
</head>

<body>
    <canvas id="cas"></canvas>
    <div class="container">
        <div class="box">
            <div class="left">
                <div class="itemgroup">
                    <div class="items itemshead">
                        <div class="hdimg">
                            <img src="./images/mycat.png" width="104" height="82" alt="" title="Hi~">
                        </div>
                    </div>
                    <div class="items">
                        <div class="running itemstyle" onclick="location='chat.html'">弹幕聊天</div>
                    </div>
                    <div class="items">
                        <div class="bgmplayer itemstyle" onclick="location='bgm.html'">听歌</div>
                    </div>
                    <div class="items">
                        <div class="about itemstyle" onclick="location='about.html'">关于</div>
                    </div>
                    <div class="items itemsbottom">
                        <div id="loginout" class="itemstyle" onclick="location='index.htm'">退出聊天</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="rRun">
                    <div class="runTop">
                        <div id="runBox" class="runBox"></div>
                    </div>
                    <div class="runBottom">
                        <input id="txt" type="text" value="老师给点分。。。。。。" maxlength="30" placeholder="发个友善的弹幕见证当下" onkeydown="enterKey()">
                        <table>
                            <tr>
                                <td id="hour"></td>
                                <td id="minute"></td>
                                <td id="second"></td>
                            </tr>
                        </table>
                        <button onclick="send()">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/canvas.js"></script>
    <script src="./js/danmu.js"></script>
    <script>
        function addZero(zero) {
            if (zero < 10) {
                return ("0" + zero);
            } else {
                return (zero);
            }
        }

        function displayTime() {
            var oHour = document.getElementById("hour");
            var oMinute = document.getElementById("minute");
            var oSecond = document.getElementById("second");

            var nowTime = new Date();
            var nowHour = nowTime.getHours();
            var nowMinute = nowTime.getMinutes();
            var nowSecond = nowTime.getSeconds();
            // console.log(addZero(nowHour) + ":" + addZero(nowMinute) + ":" + addZero(nowSecond));
            oHour.innerHTML = addZero(nowHour) + ":";
            oMinute.innerHTML = addZero(nowMinute) + ":";
            oSecond.innerHTML = addZero(nowSecond);
        }
        window.setInterval("displayTime()", 1000);
    </script>
</body>

</html>